﻿<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="../../Scripts/highcharts.js"></script>  
        <script src="../../Scripts/modules/exporting.js"></script>
        <script type="text/javascript">
		    $(function () {
            var ten= new Array();
            var array = @Html.Raw(Json.Encode(@ViewBag.sanpham));
             for(var i =0; i<array.length;i++){
                 ten[i] = array[i];
            }  

            var sample= new Array();
            var array1 = @Html.Raw(Json.Encode(@ViewBag.soluong1));
             for(var i =0; i<array1.length;i++){
                 sample[i] = array1[i];
            }  

            var sample2= new Array();
            var array = @Html.Raw(Json.Encode(@ViewBag.soluong2));
             for(var i =0; i<array.length;i++){
                 sample2[i] = array[i];
            }  
             var sample3= new Array();
            var array1 = @Html.Raw(Json.Encode(@ViewBag.soluong3));
             for(var i =0; i<array1.length;i++){
                 sample3[i] = array1[i];
            }  

            var sample4= new Array();
            var array = @Html.Raw(Json.Encode(@ViewBag.soluong4));
             for(var i =0; i<array.length;i++){
                 sample4[i] = array[i];
            }  
             var sample5= new Array();
            var array1 = @Html.Raw(Json.Encode(@ViewBag.soluong5));
             for(var i =0; i<array1.length;i++){
                 sample5[i] = array1[i];
            }  
		        $('#statistics').highcharts({
		            title: {
		                text: 'Doanh thu ban hang',
		                x: -20 //center
		            },

		            xAxis: {
		                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		            },
		            yAxis: {
		                title: {
		                    text: 'So luong ban ( cai)'
		                },
		                plotLines: [{
		                    value: 1,
		                    width: 1,
		                    color: '#808080'
		                }]
		            },
		            tooltip: {
		                valueSuffix: ' cai'
		            },
		            legend: {
		                layout: 'vertical',
		                align: 'right',
		                verticalAlign: 'middle',
		                borderWidth: 0
		            },
		            series: [{
		                name: ten[0],
		                data: [ sample[0],sample[1],sample[2],sample[3],sample[4], sample[5], sample[6], sample[7], sample[8], sample[9], sample[10], sample[11]]
		            },{
		                name: ten[1],
		                data: [ sample2[0],sample2[1],sample2[2],sample2[3],sample2[4], sample2[5], sample2[6], sample2[7], sample2[8], sample2[9], sample2[10], sample2[11]]
		            },{
		                name: ten[2],
		                data: [ sample3[0],sample3[1],sample3[2],sample3[3],sample3[4], sample3[5], sample3[6], sample3[7], sample3[8], sample3[9], sample3[10], sample3[11]]
		            },{
		                name: ten[3],
		                data: [ sample4[0],sample4[1],sample4[2],sample4[3],sample4[4], sample4[5], sample4[6], sample4[7], sample4[8], sample4[9], sample4[10], sample4[11]]
		            },{
		                name: ten[4],
		                data: [ sample5[0],sample5[1],sample5[2],sample5[3],sample5[4], sample5[5], sample5[6], sample5[7], sample5[8], sample5[9], sample5[10], sample5[11]]
		            },]
		        });
		    });
            </script>
	</head>
	<body>
    <h2>asdasd</h2>

    <div id="statistics" style="width: 1000px; height: 400px; margin: 0 auto; float:right"></div>
 
	</body>
</html>
